<template>
  <div class="tag">
    <div class="head">
      <div style="display: flex">
        <el-input v-model="data.nickName" style="width: 200px" placeholder="请输入用户昵称" />
        <el-button style="margin-left: 20px" type="primary" @click="selectUser">查询</el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        v-loading="isLoading"
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="realName"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="identityCard"
          label="身份信息"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="success" @click="subMitFet(scope.row.id)">提交</el-button>
            <el-button type="error" @click="delUserData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="data.page"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="提示"
      :visible.sync="statusDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>{{ content }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statusDialog = false">取 消</el-button>
        <el-button type="primary" @click="enterStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getIdentList, selectList, updateDataUser, delUserData } from '@/api/identity'
export default {
  name: 'Gammer',
  data() {
    return {
      content: '',
      statusDialog: false,
      isLoading: true,
      data: {
        nickName: '',
        page: 1,
        size: 10
      },
      list: {},
      total: 0,
      id: 0
    }
  },
  async created() {
    await this.getList(this.data)
  },
  methods: {
    handleClose() {
      this.statusDialog = false
    },
    // 确认提交
    async enterStatus() {
      if (this.content === '是否提交该信息') {
        await this.updateData(this.id)
        this.statusDialog = false
      }
      if (this.content === '是否删除信息') {
        await this.delList(this.id)
        this.statusDialog = false
      }
    },
    // 弹窗显示
    subMitFet(id) {
      this.content = '是否提交该信息'
      this.statusDialog = true
      this.id = id
    },
    delUserData(id) {
      this.statusDialog = true
      this.content = '是否删除信息'
      this.id = id
    },
    // 根据昵称查询未实名信息
    async selectUser() {
      const res = await selectList(this.data)
      console.log(res)
    },
    // 分页器
    handleSizeChange(e) {
      // 页面
      this.data.page = e
      this.getList(this.data)
    },
    handleCurrentChange(e) {
      // 条
      this.data.size = e
      this.getList(this.data)
    },
    async getList(data) {
      const res = await getIdentList(data)
      console.log(res)
      this.list = res.data.records
      this.total = res.data.total
      this.isLoading = false
    },
    // 提交未认证的实名信息进行认证
    async updateData(id) {
      const res = await updateDataUser(id)
      console.log(res)
    },
    async delList(id) {
      // 删除数据
      const res = await delUserData(id)
      console.log(res)
    }
  }
}
</script>

<style>
  .tag{
    padding: 10px;
    min-height: 100vh;
  }
  .head {
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-top: 10px;
    padding: 30px 10px 10px 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  .body{
    padding: 20px 0px;
    background-color: white;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
  }
</style>
